<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="f" uri="http://www.ddjd.com/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="/commons/page/codegen.jsp"%>
<script type="text/javascript" src="${ctx}/js/plugins/echarts/echarts.min.js"></script>

<style>
		.fl {
		    width: 20%;
		    float: left;
		    height: 100px;
		    margin-left: 10%;
		    margin-top: 2%;
		    border: 1px solid;
		    background-color: #c0e2f1;
		}
		.f30{
		   margin-top:20px;
		   margin-bottom:15px;
		   text-align:center;		  	
		}
		.ml20{	
		
		
		
		
		
		
		
		   margin-top: 15%;		
		   text-align: center;		
		}
		.daycount{
		    margin-top: 50px;
		}
		
</style>


<title>首页</title>
</head>
<body>
	<div class="wrapper wrapper-content  animated fadeInRight col-sm-12">
		<!-- 内容 -->
		<div class="container">
			<div>
				<div class="container-order">
					<div class="order-box whitebg pl20 pr20 shadow pb40 pt10 clearfix">
						<div class="clearfix">
							<div class="fl">
								<div class="ml20">
									<div class="pd10 bdbc textc">门总数</div>
									<div class="pd20 textc blue">										
										<span class="f30">
											<fmt:formatNumber type="number" value="${deviceCount}" />
										</span>
										<span class="f30">个</span>
									</div>
								</div>
							</div>
							<div class="fl">
								<div class="ml20">
									<div class="pd10 bdbc textc">已授权人数</div>
									<div class="pd20 textc blue">										
										<span class="f30">
											<fmt:formatNumber type="number" value="${nowCount}" />
										</span>
										<span class="f30">人</span>
									</div>
								</div>
							</div>
							<div class="fl">
								<div class="ml20">
									<div class="pd10 bdbc textc">本月出入次数</div>
									<div class="pd20 textc blue">										
										<span class="f30">
											<fmt:formatNumber type="number" value="${monthCount}" />
										</span>
										<span class="f30">次</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div>
						<div class="daycount">
							<div id="homemain"  style="width:100%; height: 650px"></div>
						</div>
					</div>
					
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	$(function(){
		
	    var dayCountList = ${dayCountList};
	    var xdata = [];
	    var ydata = [];
	    
	    dayCountList.forEach(
	    	function(item){
	    		xdata.push(item.dateStr);
	    		ydata.push(item.passCount);
	    	}
	    );

		var option =
		{ 
				title:{ 
					text:'出入次数曲线图' ,
			        x:'center',
			        y:'top',
			        textAlign:'left'
				}, 
				tooltip:{}, 
				legend:{ data:['出去次数'] },
				xAxis:{ data:xdata },
				yAxis:{ }, 
				series:[{ name:'出入次数', smooth:true,type:'line', areaStyle: { normal: {color: '#99ff00'} },data:ydata }] 
		}; 
	     //初始化echarts实例 
	     var myChart = echarts.init(document.getElementById('homemain')); 
	     //使用制定的配置项和数据显示图表
	     myChart.setOption(option);
	});
		//指定图标的配置和数据 
		
	</script>
</body>
</html>